<template>
	<el-container>
		<el-header>
			<el-row :gutter="20">
				
				<el-col :span="4">
					<el-select v-model="select.state" placeholder="请选择">
						<el-option  label="全部" value="-1">
						</el-option>
						<el-option v-for="(item,index) in state" :key="index" :label="item" :value="index">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="4">
					 <el-button type="primary" @click="search">查找</el-button>
				</el-col>
			</el-row>
		</el-header>
		<el-main>
			<el-table :data="list" style="width: 100%">
				<el-table-column label="ID" prop="id">
				</el-table-column>

				<el-table-column label="用户">
					<template slot-scope="scope" v-if="scope.row.user">
						{{scope.row.user.nickname}}
					</template>
				</el-table-column>


				<el-table-column label="联系人" prop="name">
				</el-table-column>

				<el-table-column label="联系电话" prop="phone">
				</el-table-column>

				<el-table-column label="预约时间" prop="time">
				</el-table-column>

				<el-table-column label="状态">
					<template slot-scope="scope">
						{{scope.row.state==0?'待处理':'已处理'}}
					</template>
				</el-table-column>

				<el-table-column label="创建时间" prop="created_at">
				</el-table-column>

				<el-table-column label="更新时间" prop="updated_at">
				</el-table-column>


				<el-table-column align="right">
					<template slot-scope="scope">
						<el-button size="mini" @click="edit_bt(scope.row)" :disabled="scope.row.state==1">
							{{scope.row.state==0?'处理':'已处理'}}</el-button>

						</el-button>
					</template>
				</el-table-column>
			</el-table>

		</el-main>
		<el-footer>
			<el-pagination background layout="prev, pager, next" :page-size="search_form.num" :total="total"
				@current-change="current_change">
			</el-pagination>
		</el-footer>
	</el-container>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				total: 0,
				state:["待处理","已处理"],
				select:{
					state:"-1"
				},
				search_form: {
					table: "appointments",
					page: 1,
					num: 5,
					where: null,
					orderBy: "id",
					asdes: "asc"
				}
			}
		},
		mounted() {
			this.get_data()
		},
		methods: {

			get_data() {
				const loading = this.$loading({
					lock: true,
					text: '加载中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				}); //加载页放置显示页面之前
				this.$model.post("cms/table/get", this.search_form).then(res => {
					//（pipost中楼盘管理查询的地址，参数）.then
					if (res.code == 200) {
						loading.close();
						this.list = res.data.data
						this.total = res.data.total
					}
				})
			},
			search(){
				this.search_form.where=[]
				let where=[]
				for(let i in this.select){
			
					if(this.select[i]!="-1"){
						where=[i,"=",this.select[i]]
						this.search_form.where.push(where)
					}
				}
				this.search_form.page=1
				this.get_data()
			},
			current_change(e) {
				this.search_form.page = e
				this.get_data()
			},
			edit_bt(row) {
				let data = {
					"table": "appointments",
					"id": row.id,
					"state": 1
				}
				this.$model.post("/cms/table/update",data).then(res=>{
					if(res.code==200){
						this.get_data()
					}
				})
			}
		}
	}
</script>
<style>
</style>
